<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="back">
    <div class="backs">
      <div class="fonts">出差</div>
      <hr class="hrst"/>
      <el-form label-position="right" :model="evection" :rules="rules" ref="evection" v-show="evectionOne"
               label-width="80px" style="margin-left: 50px">
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="主题" prop="evetSubject">
              <el-input v-model="evection.evetSubject" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :push="2">
            <el-form-item label="开始日期" prop="evetDate">
              <el-date-picker
                v-model="evection.evetDate"
                align="right"
                type="date"
                style="width: 61%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" :push="1">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="evection.evetData"
                align="right"
                type="date"
                style="width: 61%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="出发地">
              <el-input v-model="evection.evetDepart" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="目的地">
              <el-input v-model="evection.evetGoal" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="交通工具">
              <el-select v-model="evection.evetTraffic" style="width: 100%" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="客户" prop="customerByCustomId.customId">
              <el-select v-model="evection.customerByCustomId.customId"
                         value-key="customId"
                         style="width: 100%"
                         filterable placeholder="请选择客户">
                <el-option v-for="cus in customerList" :key="cus.customId" :label="cus.cusName" :value="cus.customId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :push="2">
            <el-form-item label="申请人">
              <el-input v-model="evection.empByEmployeesId.empName" :readonly="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :push="5">
            <el-form-item label="审批状态">
              <el-input v-model="evection.evetStatus" :readonly="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :push="2">
            <el-form-item label="经费">
              <el-input v-model="evection.evetLoan" autocomplete="off"
                        onkeyup="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :push="5">
            <el-form-item label="状态">
              <el-input v-model="evection.evetState" :readonly="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="审批人" prop="evetEmpid">
              <el-select v-model="evection.evetEmpid" style="width:100%">
                <el-option-group
                  v-for="group in approvalList"
                  :key="group.postName"
                  :label="group.postName">
                  <el-option
                    v-for="item in group.empVos"
                    :key="item.employeesId"
                    :label="item.empName"
                    :value="item.employeesId">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="备注">
              <el-input v-model="evection.evetRemark" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-position="right" :model="evection" v-show="evectionTwo"
               label-width="80px" style="margin-left: 50px">
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="主题">
              {{evection.evetSubject}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :push="2">
            <el-form-item label="开始日期">
              {{evection.evetDate | formatDate}}
            </el-form-item>
          </el-col>
          <el-col :span="12" :push="1">
            <el-form-item label="结束时间">
              {{evection.evetData | formatDate}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="出发地">
              {{evection.evetDepart}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="目的地">
              {{evection.evetGoal}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="交通工具">
              {{evection.evetTraffic}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="客户">
              {{evection.customerByCustomId.cusName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :push="2">
            <el-form-item label="申请人">
              {{evection.empByEmployeesId.empName}}
            </el-form-item>
          </el-col>
          <el-col :span="8" :push="5">
            <el-form-item label="审批状态">
              {{evection.evetStatus}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :push="2">
            <el-form-item label="经费">
              {{evection.evetLoan}}
            </el-form-item>
          </el-col>
          <el-col :span="8" :push="5">
            <el-form-item label="状态">
              {{evection.evetState}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="审批人">
              {{empId}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="19" :push="2">
            <el-form-item label="备注">
              {{evection.evetRemark}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="2" :push="2" style="font-size: 14px;margin-left: 10px">
          <span>审批操作</span>
        </el-col>
        <el-col :span="15" :push="1" style="margin-left: 30px;margin-top: 5px">
          <el-timeline :reverse="false">
            <el-timeline-item
              v-for="(activity, index) in checkDetailsList"
              :key="index">
              {{activity.apprsDate | formatDate}} {{activity.empByEmployeesId.empName}} {{activity.cucheckTypeByCutId.cutName}}
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-col :span="2" :push="20">
          <el-button icon="el-icon-check" v-show="buttonShow" @click="addEvet">保存</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="last" v-show="cordShow">
      <div class="font_top">
        <img src="../imgs/cctb.png" class="img-circle">
        <div class="font_height">出差总结</div>
      </div>
      <div v-for="c in cordList">
        <div class="div_border">
          <span style="margin-right: 5px">●</span>
          <span>{{c.empByEmployeesId.empName+"："}}</span>
          <span>{{c.cordDate | formatDate}}</span><br/>
          <span>→</span>
          <span>{{c.cordContent}}</span>
        </div>
      </div>
      <el-row>
        <el-col :span="20" style="margin-left: 10px">
          <el-input type="textarea" v-model="substance" :rows="3"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2" :push="9">
          <el-button style="margin-bottom: 10px;margin-top: 10px" @click="addRecord" plain>保存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AsParticulars",
    data() {
      return {
        evection:{
          evetId:'',
          evetDate:'',
          evetData:'',
          evetEmpid:'',
          evetDepart:'',
          evetGoal:'',
          evetSubject:'',
          evetTraffic:'',
          evetRemark:'',
          evetState:'',
          evetLoan:'',
          evetStatus: '',
          customerByCustomId:{
            customId:'',
            cusName:''
          },
          empByEmployeesId:{
            employeesId:'',
            empName:''
          }
        },    //出差表
        substance: '',    //总结内容
        customerList:[],  //客户列表
        empList:[],       //员工列表
        approvalList:[],  //审批人
        empId: '',        //审批人姓名
        cordList:[],      //出差日志列表
        checkDetailsList: [],//审批记录列表
        employeesId: '',  //当前登录用户
        evectionOne: false,//新增显隐
        evectionTwo: false,//查看显隐
        buttonShow: false, //保存按钮显隐
        cordShow: false,   //出差总结显隐
        options: [{
          value: '选项1',
          label: '高铁'
        }, {
          value: '选项2',
          label: '动车'
        }, {
          value: '选项3',
          label: '火车'
        }, {
          value: '选项4',
          label: '飞机'
        }, {
          value: '选项5',
          label: '汽车'
        }, {
          value: '选项6',
          label: '其它'
        }],
        rules: {
          evetSubject: [
            {required: true, message: '请输入主题内容', trigger: 'blur'},
            {min: 1, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'blur'}
          ],
          evetDate: [
            {required: true, message: '请选择日期', trigger: 'change' }
          ],
          'customerByCustomId.customId': [
            {required: true, message: '请选择客户', trigger: 'change' },
          ],
          evetEmpid: [
            {required: true, message: '请选择审批人', trigger: 'change' },
          ]
        }
      }
    },
    created:function() {
      this.$axios.get("http://localhost:8088/crm/check-all"
      ).then(v=>{
        this.customerList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })

      this.$axios.get("http://localhost:8088/exs/check-emp"
      ).then(v=>{
        this.empList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })

      this.$axios.get("http://localhost:8088/buDetailsTwo/approval"
      ).then(v=>{
        this.approvalList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })

      this.user = JSON.parse(sessionStorage.getItem('user'));
      this.employeesId = this.user.employeesId;//当前登录用户id
      this.init();
    },
    methods: {
      init(){//数据回显
        var evetIds = this.$route.query.evetId;
        if(evetIds == undefined || evetIds == ''){
          this.cordShow = false;
          this.evectionOne = true;
          this.evectionTwo = false;
          this.buttonShow = true;
          this.$axios.get("http://localhost:8088/exs/postLevel-emp",
            {params:{employeesId:this.user.employeesId}}
          ).then(v=>{
            this.postLevelList = v.data;
            if(this.postLevelList[0].deptsId == 1 && this.postLevelList[0].postLevel == 1){
              this.$axios.get("http://localhost:8088/exs/ordinary-boss"
              ).then(v => {
                this.evection.evetEmpid = v.data;
              }).catch(v => {
                alert("访问失败!" + v.data);
              })
            }else {
              if (this.postLevelList[0].postLevel == 1) {
                this.$axios.get("http://localhost:8088/exs/ordinary-one",
                  {params: {deptsId: this.postLevelList[0].deptsId}}
                ).then(v => {
                  this.evection.evetEmpid = v.data;
                }).catch(v => {
                  alert("访问失败!" + v.data);
                })
              }
              if (this.postLevelList[0].postLevel == 2) {
                this.$axios.get("http://localhost:8088/exs/ordinary-two",
                  {params: {deptsId: this.postLevelList[0].deptsId}}
                ).then(v => {
                  this.evection.evetEmpid = v.data;
                }).catch(v => {
                  alert("访问失败!" + v.data);
                })
              }
            }
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }
        if(evetIds != undefined && evetIds != '') {
          this.evectionOne = false;
          this.evectionTwo = true;
          this.buttonShow = false;
          this.$axios.get("http://localhost:8088/eve/check-evet",
            {params: {evetIds: evetIds}}
          ).then(v => {
            this.evection = v.data;
            this.$axios.get("http://localhost:8088/exs/emp-name",
              {params:{employeesId: this.evection.evetEmpid}}
            ).then(v=>{
              if(v.data != null && v.data != '' && v.data != undefined){
                this.empId = v.data;
              }
            }).catch(v=>{
              alert("访问失败!"+v.data);
            })
            var state = this.evection.evetState;
            if(state === '出差完成'){
              this.cordShow = true;
            }
          }).catch(v => {
            alert("访问失败!" + v.data);
          })

          this.$axios.get("http://localhost:8088/eve/cord-evetid",
            {params: {evetId: evetIds}}
          ).then(v => {
            this.cordList = v.data;
          }).catch(v => {
            alert("访问失败!" + v.data);
          })

          let apprTitle = '出差申请';
          this.$axios.get("http://localhost:8088/che/deliver-id",
            {params:{apprTitle:apprTitle, apprIds:evetIds}}
          ).then(v => {
            this.checkDetailsList = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }
      },
      addEvet(){//新增出差表
        this.$refs.evection.validate((valid) => {
          if (valid) {
            var evetIds = this.$route.query.evetId;
            if(this.evection.evetDate < this.evection.evetData){
              this.evection.empByEmployeesId.employeesId = this.employeesId;
              this.$axios.post("http://localhost:8088/eve/save-evet", {
                evetId: this.evection.evetId,
                evetDate: this.evection.evetDate,
                evetData: this.evection.evetData,
                evetDepart: this.evection.evetDepart,
                evetGoal: this.evection.evetGoal,
                evetSubject: this.evection.evetSubject,
                evetTraffic: this.evection.evetTraffic,
                evetRemark: this.evection.evetRemark,
                evetState: this.evection.evetState,
                evetLoan: this.evection.evetLoan,
                evetStatus: this.evection.evetStatus,
                customerByCustomId: this.evection.customerByCustomId,
                empByEmployeesId: this.evection.empByEmployeesId,
                evetEmpid: this.evection.evetEmpid
              }).then(() => {
                this.$message.success("新增成功");
                this.$router.push({
                  path: '/evet'
                })
              }).catch(v => {
                alert("访问失败!" + v.data);
              })
            }else{
              this.$message.error("出差开始时间不能大于结束时间");
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      addRecord(){//新增出差总结
        var evetIds = this.$route.query.evetId;
        if(evetIds != '' && evetIds != undefined){
          this.$axios.get("http://localhost:8088/eve/save-cord",
            {params: {substance: this.substance, employeesId: this.employeesId, evetId:evetIds}}
          ).then(() => {
          }).catch(v => {
            alert("访问失败!" + v.data);
          })
        }
      },
      clear(){//清空缓存
        this.evection = {
          evetId:'',
          evetDate:'',
          evetData:'',
          evetEmpid:'',
          evetDepart:'',
          evetGoal:'',
          evetSubject:'',
          evetTraffic:'',
          evetRemark:'',
          evetState:'',
          evetLoan: '',
          evetStatus: '',
          customerByCustomId:{
            customId:'',
            cusName:''
          },
          empByEmployeesId:{
            employeesId:'',
            empName:''
          }
        };
        this.substance = '';
        this.checkDetailsList = [];
      }
    },
    watch:{
      $route(){//跳转到该页面后需要进行的操作
        this.clear();
        this.init();
      }
    },
    filters: {
      formatDate(time){
        let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = date.getMonth()+1;
        let day    = date.getDate();
        let hour   = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
        return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
      }
    }
  }
</script>

<style scoped>
  .back{
    border: 1px solid #F4F8FB;
    width: 98%;
    background: #F4F8FB;
  }
  .backs{
    border: 1px solid white;
    width: 95%;
    background: white;
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 20px;
  }
  .fonts{
    font-size: 18px;
    margin-top: 15px;
    margin-left: 15px;
  }
  .hrst{
    width: 98%;
    border-top: 1px solid #aaaaaa;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    border: 0;
  }
  .last{
    border: 1px solid white;
    width: 95%;
    background: white;
    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .img-circle {
    width: 18px;
    height: 18px;
  }
  .font_top{
    border: 1px solid white;
    width: 90px;
    height: 20px;
    margin-top: 5px;
    margin-left: 5px;
  }
  .font_height{
    border: 1px solid white;
    width: 70px;
    height: 15px;
    font-size: 12px;
    float: right;
  }
  .div_border{
    margin-top: 5px;
    margin-left: 10px;
    font-size: 12px;
  }
</style>
